<%--
  Created by IntelliJ IDEA.
  User: liyx
  Date: 2017/11/19
  Time: 下午10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <link rel="stylesheet" href="/nutzdemo/css/user/index.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <title>用户列表</title>
</head>
<body>
    <div id="app">
        <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
        <mt-button @click.native="handleClick">添加</mt-button>
        <mt-loadmore>
            <ul>
                <li v-for="item in list">{{ item.name }}</li>
            </ul>
        </mt-loadmore>
    </div>


    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>

    <script>

        new Vue({
            el: '#app',
            data: {
                list: [],
                username:''
            },
            methods: {
                handleClick: function () {
                    this.createUser();
                },

                createUser: function () {

                    var that = this;
                    var params = {
                        "name": that.username,  // 需要跟java bean（实体类）字段对应
                        "password": that.username
                    };
                    that.$http.post('/nutzdemo/user/create', params).then(function (res) {
                        that.$toast({
                            message: '操作成功',
                            iconClass: 'icon icon-success'
                        });
                        that.loadData();
                    });

                },
                loadData: function () {
                    var that = this;
                    that.$http.get("/nutzdemo/user/list").then(function (res) {
                        that.list = res.body;
                    })
                }
            },
            mounted: function(){
                this.loadData();
            }
        })
    </script>
</body>
</html>
